<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit">
  <title>日志服务</title>
  <meta name="keywords" content="日志服务">
  <meta name="description" content="日志服务">
  <!--[if lt IE 9]>
  <meta http-equiv="refresh" content="0;ie.html"/>
  <![endif]-->
  <link rel="shortcut icon" href="statics/img/favicon.ico">
  <link href="${request.contextPath}/statics/css/indexCss.css?v=4.1.0" rel="stylesheet">
  <style>
    @media (max-width: 750px) {
      html {
        width: 1920px;
      }

      body {
        width: 100% !important;
        overflow-x: auto !important;
      }

      body.fixed-sidebar .navbar-static-side {
        display: block;
      }
    }
  </style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div id="wrapper">
  <!--左侧导航开始-->
  <nav class="navbar-default navbar-static-side" role="navigation" ref='navTab'>
    <div class="nav-close">
      <i class="fa fa-times-circle"></i>
    </div>
    <div class="sidebar-collapse">
      <ul class="nav" id="side-menu">
        <li class="nav-header" style="padding: 10px;25px;">
          <div>
            <span><img alt="image" class="img-circle" style="width: 100%;height: auto"
                       src="statics/img/logo.png"/></span>
            <!--<h3 class="systemName" style="color: #ffffff">-->
            <!--{{system}}日志服务-->
            <!--</h3>-->
          </div>
          <div class="dropdown profile-element hidden">

            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear">
                            <span class="block m-t-xs"><strong class="font-bold"
                            >admin</strong></span>
                            <span class="text-muted text-xs block">超级管理员<b class="caret"></b></span>
                             </span>
            </a>
            <ul class="dropdown-menu animated fadeInRight m-t-xs">
              <li><a @click="personal" href="#">修改头像</a>
              </li>
              <li><a @click="personal" href="#">个人资料</a>
              </li>
              <li><a @click="personal" href="#">密码修改</a>
              </li>
              <li><a @click="personal" href="#">信箱</a>
              </li>
              <li class="divider"></li>
              <li><a href="/logout">安全退出</a>
              </li>
            </ul>
            <div class="logo-element">{{system}}</div>
          </div>
        </li>

        <menu-item :item="item" v-for="item in menuList"></menu-item>
      </ul>
    </div>
  </nav>
  <!--左侧导航结束-->
  <!--右侧部分开始-->
  <div id="page-wrapper" class="gray-bg dashbard-1" ref='pageWrapper'>
    <div class="row border-bottom" ref="borderBottom">
      <nav class="navbar navbar-static-top" role="navigation"
           style="margin-bottom: 0">
        <div class="navbar-header">

          <a @click="isSlide()" ref='slideBar' id="slideBar"
             class="navbar-minimalize navbar-minimalize1 minimalize-styl-2 btn btn-default "
             href="#" title="收起菜单"><i class="fa fa-bars"></i> </a>
          <a @click="hideLeftNav()" ref='slideBar2' id="slideBar2"
             class="navbar-minimalize minimalize-styl-3 btn btn-default "
             href="#" title="收起菜单">
            <i v-if="isShowLeftNav" class="fa fa-angle-double-left"></i>
            <i v-else class="fa fa-angle-double-right"></i>
          </a>
          <form role="search" class="navbar-form-custom"
                method="post" action="">
            <div class="form-group">
              <!--<input type="text" placeholder="请输入您需要查找的内容 …"-->
              <!--class="form-control" name="top-search" id="top-search">-->
            </div>
          </form>
        </div>
        <ul class="nav navbar-top-links navbar-right">
          <li class="hidden-xs">
            <a @click='setFulScreen()'>
              <i class="glyphicon glyphicon-fullscreen"></i>
              全屏
            </a>
            <!--<a @click='exitFulScreen()' v-if='isFul'>-->
            <!--<i class="glyphicon glyphicon-resize-small"></i>-->
            <!--退出-->
            <!--</a>-->
          </li>
          <li class="dropdown"><a class="dropdown-toggle count-info"
                                  data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i>
            <span class="label label-warning"> </span>通知
          </a>
            <ul class="dropdown-menu dropdown-messages">
              <li v-for="row in rows" class="m-t-xs">
                <div class="dropdown-messages-box">
                  <a class="pull-left"> <i
                      class="fa fa-server"></i>
                  </a>
                  <div class="media-body">
                    <small class="pull-right"></small>
                    <strong> </strong>
                    <br>
                    <small class="text-muted"></small>
                  </div>
                </div>
                <div class="divider"></div>
              </li>
              <li>
                <div class="text-center link-block">
                  <a class="J_menuItem" href="/oa/notify/selfNotify"> <i
                      class="fa fa-envelope"></i> <strong> 查看所有消息</strong>
                  </a>
                </div>
              </li>
            </ul>
          </li>
          <!--<li class="hidden-xs"><a @click="personal" href="#" ><i class="fa fa-id-card"></i> 个人</a></li>-->
          <!--<li class="dropdown hidden-xs"><a-->
          <!--class="right-sidebar-toggle" aria-expanded="false"> <i-->
          <!--class="fa fa-tasks"></i> 主题-->
          <!--</a></li>-->
        </ul>
      </nav>
    </div>
    <div class="row content-tabs" ref="contentTabs">
      <button class="roll-nav roll-left J_tabLeft">
        <i class="fa fa-backward"></i>
      </button>
      <nav class="page-tabs J_menuTabs">
        <div class="page-tabs-content">
          <a href="javascript:;" class="active J_menuTab"
             data-id="index2.html">首页</a>
        </div>
      </nav>
      <button class="roll-nav roll-right J_tabRight">
        <i class="fa fa-forward"></i>
      </button>
      <div class="btn-group roll-nav roll-right">
        <button class="dropdown J_tabClose" data-toggle="dropdown">
          关闭操作<span class="caret"></span>
        </button>
        <ul role="menu" class="dropdown-menu dropdown-menu-right">
          <li class="J_tabShowActive"><a>定位当前选项卡</a></li>
          <li class="divider"></li>
          <li class="J_tabCloseAll"><a>关闭全部选项卡</a></li>
          <li class="J_tabCloseOther"><a>关闭其他选项卡</a></li>
        </ul>
      </div>
      <a href="./logout" class="roll-nav roll-right J_tabExit"><i
          class="fa fa fa-sign-out"></i> 退出</a>
    </div>
    <div class="row J_mainContent" id="content-main" ref="contentMain">

    </div>
    <div class="footer">
      <!--<div class="pull-right">freeter飞特商城日志服务，不仅仅是商城</div>-->
    </div>
  </div>
  <!--右侧部分结束-->
  <!--右侧边栏开始-->
  <div id="right-sidebar">
    <div class="sidebar-container">
      <ul class="nav nav-tabs navs-3">

        <li class="active" style="width: 50%"><a data-toggle="tab" href="#tab-1"> <i
            class="fa fa-gear"></i> 主题
        </a></li>
        <li class="" style="width: 50%"><a data-toggle="tab" href="#tab-2"> 通知 </a></li>
        <!--<li><a data-toggle="tab" href="#tab-3"> 项目进度 </a></li>-->
      </ul>
      <div class="tab-content">
        <div id="tab-1" class="tab-pane active">
          <div class="sidebar-title">
            <h3>
              <i class="fa fa-comments-o"></i> 主题设置
            </h3>
            <small><i class="fa fa-tim"></i>
              你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。
            </small>
          </div>
          <div class="skin-setttings">
            <div class="title">主题设置</div>
            <div class="setings-item">
              <span>收起左侧菜单</span>
              <div class="switch">
                <div class="onoffswitch">
                  <input type="checkbox" name="collapsemenu"
                         class="onoffswitch-checkbox" id="collapsemenu"> <label
                    class="onoffswitch-label" for="collapsemenu"> <span
                    class="onoffswitch-inner"></span> <span
                    class="onoffswitch-switch"></span>
                </label>
                </div>
              </div>
            </div>
            <div class="setings-item">
              <span>固定顶部</span>

              <div class="switch">
                <div class="onoffswitch">
                  <input type="checkbox" name="fixednavbar"
                         class="onoffswitch-checkbox" id="fixednavbar"> <label
                    class="onoffswitch-label" for="fixednavbar"> <span
                    class="onoffswitch-inner"></span> <span
                    class="onoffswitch-switch"></span>
                </label>
                </div>
              </div>
            </div>
            <div class="setings-item">
              <span> 固定宽度 </span>
              <div class="switch">
                <div class="onoffswitch">
                  <input type="checkbox" name="boxedlayout"
                         class="onoffswitch-checkbox" id="boxedlayout"> <label
                    class="onoffswitch-label" for="boxedlayout"> <span
                    class="onoffswitch-inner"></span> <span
                    class="onoffswitch-switch"></span>
                </label>
                </div>
              </div>
            </div>
            <div class="title">皮肤选择</div>
            <div class="setings-item default-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-0">
										默认皮肤 </a>
								</span>
            </div>
            <div class="setings-item blue-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-1">
										蓝色主题 </a>
								</span>
            </div>
            <div class="setings-item yellow-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-3">
										黄色/紫色主题 </a>
								</span>
            </div>
          </div>
        </div>
        <div id="tab-2" class="tab-pane">

          <div class="sidebar-title">
            <h3>
              <i class="fa fa-comments-o"></i> 最新通知
            </h3>
            <small><i class="fa fa-tim"></i> 您当前有0条未读信息</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--全局js -->
<!--<script src="${request.contextPath}/statics/js/indexJs.js"></script>-->
<script type="text/javascript" src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/plugins/layui/layui.js"></script>
<!--vue -->
<script type="text/javascript" src="${request.contextPath}/statics/libs/vue.min.js"></script>

<script src="${request.contextPath}/statics/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="${request.contextPath}/statics/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!--自定义js -->
<script src="${request.contextPath}/statics/js/app.js?v=4.1.0"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/contabs.js"></script>
<!--第三方插件 -->
<script src="${request.contextPath}/statics/plugins/pace/pace.min.js"></script>

<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>


<!--<script src="/js/appjs/oa/webSocket/sockjs.min.js"></script>-->
<!--<script src="/js/appjs/oa/webSocket/stomp.min.js"></script>-->
<!--Toastr script -->
<script src="${request.contextPath}/statics/plugins/toastr/toastr.min.js"></script>

<script type="text/javascript">


  //生成菜单
  var menuItem = Vue.extend({
    name: 'menu-item',
    props: {item: {}},
    template: [
      '<li class="menulists">',
      '<a v-if="item.type === 0" href="#">',
      '<i v-if="item.icon != null" :class="item.icon"></i>',
      '<span class="nav-label">{{item.name}}</span> <span class="fa arrow"></span>',
      '</a>',
      '<ul v-if="item.type === 0" class="nav nav-second-level">',
      '<li v-for="(item,index) in item.list" >',
      '<a :id="&quot;index&quot;+index" class="J_menuItem" v-if="item.type === 1" :href="item.url" :data-index="index" ><i v-if="item.icon != null" :class="item.icon"></i> <span class=" nav-labels">{{item.name}}</span> <span class="fa arrow"></span></a>',
      '</li>',

      '<a v-if="item.type === 1" :href="item.url"> <i v-if="item.icon != null" :class="item.icon"></i> <span class="nav-label">{{item.name}}</span> <span class="fa arrow"></span></a>',
      '</li>'
    ].join('')
  });

  //注册菜单组件
  Vue.component('menuItem', menuItem);
  var stompClient = null;
  $(function () {
    // connect();

  });

  function connect() {
    var sock = new SockJS("/endpointChat");
    var stomp = Stomp.over(sock);
    stomp.connect('guest', 'guest', function (frame) {

      /**  订阅了/user/queue/notifications 发送的消息,这里雨在控制器的 convertAndSendToUser 定义的地址保持一致, 
       *  这里多用了一个/user,并且这个user 是必须的,使用user 才会发送消息到指定的用户。 
       *  */
      stomp.subscribe("/user/queue/notifications", handleNotification);
      stomp.subscribe('/topic/getResponse', function (response) { //订阅/topic/getResponse 目标发送的消息。这个是在控制器的@SendTo中定义的。
        toastr.options = {
          "closeButton": true,
          "debug": false,
          "progressBar": true,
          "positionClass": "toast-bottom-right",
          "onclick": null,
          "showDuration": "400",
          "hideDuration": "1000",
          "timeOut": "7000",
          "extendedTimeOut": "1000",
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut"
        }
        toastr.info(JSON.parse(response.body).responseMessage);
      });
    });

    function handleNotification(message) {
      wrapper.notify();
      toastr.info(message.body);
    }
  }

  var wrapper = new Vue({
    el: '#wrapper',
    data: {
      total: '',
      rows: '',
      menuList: {},
      isFul: false,
      docHeight: '',
      slideChanged: false,
      system: '日志',
      issettimeout: false,
      isShowLeftNav: true
    },
    methods: {
      getMenuList: function () {
        $.getJSON("sys/log/initMenu", function (r) {
          if (r.responseHeader.code == 1) {
            wrapper.menuList = r.body;
          } else {
            window.location.replace('./logout');
          }

          setTimeout(function () {
            for (var i = 0; i < wrapper.menuList.length; i++) {
              if (wrapper.menuList[i].isOpen) {
                $('.menulists').eq(i).find('a').eq(0).click();
              }
            }
          }, 200)

        });
      },
      notify: function () {
        $.getJSON('/oa/notify/message', function (r) {
          wrapper.total = r.total;
          wrapper.rows = r.rows;
        });
      },

      setFulScreen: function () {
        var _this = this;

        if (document.documentElement.RequestFullScreen) {
          document.documentElement.RequestFullScreen();
        }
        //兼容火狐
        if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        }
        //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
        if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen();
        }
        //兼容IE,只能写msRequestFullscreen
        if (document.documentElement.msRequestFullscreen) {
          document.documentElement.msRequestFullscreen();
        }
        wrapper.$refs.contentMain.style.height = '100%';
        wrapper.$refs.contentTabs.style.display = 'none';
        wrapper.$refs.navTab.style.display = 'none';
        wrapper.$refs.slideBar.style.display = 'none';
        wrapper.$refs.borderBottom.style.display = 'none';
        wrapper.$refs.pageWrapper.style.marginLeft = 0;

      },
      exitFulScreen: function () {
        var _this = this;

      },
      isSlide: function () {
        var _this = this;
        if (_this.slideChanged) {
          wrapper.$refs.pageWrapper.style.marginLeft = '220px';
          _this.slideChanged = false;
          $('.img-circle').attr('src', 'statics/img/logo.png')
        } else {
          wrapper.$refs.pageWrapper.style.marginLeft = '70px';
          _this.slideChanged = true;
          $('.img-circle').attr('src', 'statics/img/logo1.png')
        }

      },
      isFullScreen: function () {

        var _this = this;
        if ((window.document.body.clientHeight - _this.docHeigt) > 90) {
          _this.isFul = true;

        } else {
          _this.isFul = false;

          //wrapper.$refs.pageWrapper.style.marginLeft = '70px';
        }

      },
      personal: function () {
        layer.open({
          type: 2,
          title: '个人设置',
          maxmin: true,
          shadeClose: false,
          area: ['800px', '600px'],
          content: '/sys/user/personal'
        });
      },
      hideLeftNav: function () {
        var _this = this;
        if (_this.isShowLeftNav) {
          $("body.fixed-sidebar .navbar-static-side").css("left", "-220px");
          $("#page-wrapper").css("marginLeft", "0px");
          _this.isShowLeftNav = false;
        } else {
          $("body.fixed-sidebar .navbar-static-side").css("left", "0px");
          $("#page-wrapper").css("marginLeft", "220px");
          _this.isShowLeftNav = true;
        }
      },
      iswindow: function () {
        var _this = this;
        setTimeout(function () {
          if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
            wrapper.$refs.contentMain.style.height = '100%';
            wrapper.$refs.contentTabs.style.display = 'none';
            wrapper.$refs.navTab.style.display = 'none';
            wrapper.$refs.slideBar.style.display = 'none';
            wrapper.$refs.borderBottom.style.display = 'none';
            wrapper.$refs.pageWrapper.style.marginLeft = 0;
          } else {
            wrapper.$refs.contentMain.style.height = 'calc(100% - 140px)';
            wrapper.$refs.contentTabs.style.display = 'block';
            wrapper.$refs.navTab.style.display = 'block';
            wrapper.$refs.slideBar.style.display = 'block';
            wrapper.$refs.borderBottom.style.display = 'block';
            if (_this.slideChanged) {
              wrapper.$refs.pageWrapper.style.marginLeft = '70px';
            } else {
              wrapper.$refs.pageWrapper.style.marginLeft = '220px';
            }
          }
        }, 100)

      }
    },
    mounted: function () {
      var _this = this;
      this.getMenuList();

      _this.docHeigt = window.document.body.clientHeight;

      document.addEventListener('fullscreenchange', function () {
        _this.iswindow()
      });

      document.addEventListener('webkitfullscreenchange', function () {
        _this.iswindow()
      });

      document.addEventListener('mozfullscreenchange', function () {
        _this.iswindow()
      });

      document.addEventListener('MSFullscreenChange', function () {
        _this.iswindow()
      });
      document.oncontextmenu = function () {
        return false;
      };
      document.onkeydown = function () {
        // console.log(window.event.keyCode)
        if (window.event && window.event.keyCode == 122) {
          event.keyCode = 0;
          event.returnValue = false;
          return false;
        }
      };
      if ((navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        // $("#page-wrapper").css('marginLeft','220px');
        // $('.img-circle').attr('src','statics/img/logo.png');
        // window.addEventListener("orientationchange", function() {
        //     // setTimeout(function () {
        //     //     $("#slideBar").click();
        //     //     $("#slideBar").stop().hide();
        //     //     $("#slideBar2").stop().show();
        //     // },1000);
        // }, false);
        setTimeout(function () {
          $("#slideBar").stop().hide();
          $("#slideBar2").stop().show();
        }, 1000);
      } else {
        $("#slideBar2").stop().hide();
      }
    },
    created: function () {
      //this.notify()
      $('.J_menuItem').on('click', menuItem);
      Vue.nextTick(function () {
        $('.J_menuItem').on('click', menuItem);
      });

    }
    , updated: function () {
      layui.config({
        base: 'statics/js/',
      }).use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
      });

      function menuItem() {
        // 获取标识数据
        var dataUrl = $(this).attr('href'),
            dataIndex = $(this).data('index'),
            menuName = $.trim($(this).text()),
            flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) {
          return false;
        }

        // 选项卡菜单已存在
        $('.J_menuTab').each(function () {
          if ($(this).data('id') == dataUrl) {
            if (!$(this).hasClass('active')) {
              $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
              scrollToTab(this);
              // 显示tab对应的内容区
              $('.J_mainContent .J_iframe').each(function () {
                if ($(this).data('id') == dataUrl) {
                  $(this).show().siblings('.J_iframe').hide();
                  return false;
                }
              });
            }
            flag = false;
            return false;
          }
        });

        // 选项卡菜单不存在
        if (flag) {
          var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName
              + ' <i class="fa fa-times-circle"></i></a>';
          $('.J_menuTab').removeClass('active');

          // 添加选项卡对应的iframe
          var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="'
              + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
          $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);

          //显示loading提示
//        	            var loading = layer.load();
          //
//        	            $('.J_mainContent iframe:visible').load(function () {
//        	                //iframe加载完成后隐藏loading提示
//        	                layer.close(loading);
//        	            });
          // 添加选项卡
          $('.J_menuTabs .page-tabs-content').append(str);
          scrollToTab($('.J_menuTab.active'));
        }
        return false;
      }

      $('.J_menuItem').on('click', menuItem);
      metisMenu();
    }
  })
  window.onload = function () {
    var _htmls = ' <iframe class="J_iframe" name="iframe0" width="100%" height="100%"' +
        'src="main.html"  frameborder="0" data-id="index2.html"' +
        'seamless></iframe>'
    $('.J_mainContent').append(_htmls);
  }
</script>
</body>
</html>
